<template>
  <div class="home">
    <header class="header">
      <h1>首页</h1>
    </header>
    <div class="content">
      <div class="chat-list">
        <div 
          v-for="chat in chatList" 
          :key="chat.id"
          class="chat-item"
          @click="toChat(chat)"
        >
          <img :src="chat.avatar" :alt="chat.name" class="avatar">
          <div class="info">
            <div class="name">{{ chat.name }}</div>
            <div class="last-message">{{ chat.lastMessage }}</div>
          </div>
          <div class="time">{{ formatTime(chat.lastTime) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { formatTime } from '../../utils/time'

const router = useRouter()

interface ChatItem {
  id: string
  name: string
  avatar: string
  lastMessage: string
  lastTime: number
}

const chatList = ref<ChatItem[]>([
  {
    id: '1',
    name: '小助手',
    avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=bot1',
    lastMessage: '你好啊！',
    lastTime: Date.now() - 1000000
  }
])

const toChat = (chat: ChatItem) => {
  router.push('/chat')
}
</script>

<style scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.header h1 {
  margin: 0;
  font-size: 18px;
  text-align: center;
}

.content {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin-right: 12px;
}

.info {
  flex: 1;
}

.name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.last-message {
  font-size: 14px;
  color: #666;
}

.time {
  font-size: 12px;
  color: #999;
}
</style> 